<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>支付宝案例</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 955px;
            height: 1410px;
            background: #f4f5f9;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
        }
        .header{
            height: 124px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #232939;
            color: white;
            border-top: 2px solid #000004;
            
        }
        .header span{
            flex: 1;
            font-size: 40px;
        }
        .header i{
            width: 117px;
            font-size: 50px;
            text-align: center;
        }

        .section{
            height: calc(100% - 252px);
        }

        .section .top{
            display: flex;
            height: 287px;
            background:#232939;
        }
        .top div{
            display: flex;
            flex-direction: column;
            flex: 1;
            justify-content: center;
            align-items: center;
            color: white;
        }
        .top div i{
            font-size: 100px;
        }
        .top div span{
            font-size: 35px;
        }

        .center{
            background:white;
            display: flex;
            flex-wrap: wrap;
        }
        .center div{
            width: 25%;
            height: 210px;
            box-sizing: border-box;
            border: 1px solid #ededed;
            display: flex;
            flex-direction: column;
            text-align: center;
            justify-content: center;
        }
        .center div i{
            font-size: 55px;
            color: #33b6e2;
        }
        .center div span{
            font-size: 28px;
            color: black;
        }
        .bottom{
            height: 222px;
            margin-top:10px;
            border-top: 1px solid #ededed;
            border-bottom: 1px solid #ededed;
            background: url(./image/支付宝.png);

        }

        .footer{
            height: 128px;
            background: rgb(235, 213, 142);
            display: flex;
            border-top : 1px solid #ededed;
            margin-top: 2px;
        }
        .footer div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            flex: 1;
            background: white;
            color: #adaeb0;
        }
        .footer div i{
            font-size: 58px;
        }
        .footer div span{
            font-size: 27px;
        }
        .footer div:hover{
            color: #33b6e2;
        }
        

        
    </style>
</head>
<body>
    <div class="box">
        <div class="header">
            <i class="iconfont icon-wenjian"></i>
            <span>账单</span>
            <i class="iconfont icon-wode"></i>
            <i class="iconfont icon-xiaoxi"></i>
            <i class="iconfont icon-share"></i>
        </div>
        <div class="section">
            <div class="top">
                <div><i class="iconfont icon-zanting3"></i>
                    <span>扫一扫</span>
                </div>
                <div><i class="iconfont icon-10"></i>
                    <span>付款</span>    
                </div>
                <div><i class="iconfont icon-07"></i>
                    <span>卡卷</span>
                </div>
                <div><i class="iconfont icon-paynumber"></i>
                    <span>个人</span>
                </div>
            </div>
            <div class="center">
                <div><i class="iconfont icon-17"></i>
                    <span>信用卡还款</span>
                </div>
                <div><i class="iconfont icon-17"></i>
                    <span>记账本</span>
                </div>
                <div><i class="iconfont icon-11"></i>
                    <span>股票</span>
                </div>
                <div><i class="iconfont icon-18"></i>
                    <span>理财小工具</span>
                </div>
                <div><i class="iconfont icon-18"></i>
                    <span>淘宝</span>
                </div>
                <div><i class="iconfont icon-10"></i>
                    <span>游戏充值</span>
                </div>
                <div><i class="iconfont icon-24"></i>
                    <span>亲密付</span>
                </div>
                <div><i class="iconfont icon-25"></i>
                    <span>机票火车票</span>
                </div>
                <div><i class="iconfont icon-25"></i>
                    <span>手机充值</span>
                </div>
                <div><i class="iconfont icon-25"></i>
                    <span>转账</span>
                </div>
                <div><i class="iconfont icon-25"></i>
                    <span>口碑外卖</span>
                </div>
                <div><i class="iconfont icon-25"></i>
                    <span>阿里旅行</span>
                </div>
            </div>
            <div class="bottom"></div>
        </div>
        <div class="footer">
            <div><i class="iconfont icon-zhifubao"></i>
                <span>口碑</span>
            </div>
            <div><i class="iconfont icon-dingwei"></i>
                <span>定位</span>
            </div>
            <div><i class="iconfont icon-tengxunweibo"></i>
                <span>腾讯微博</span>
            </div>
            <div><i class="iconfont icon-youxiang"></i>
                <span>邮箱</span>
            </div>
        </div>
    </div>
</body>
</html>